<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="stylesheet" href="./css/register.css">
</head>

<body>
    <div class="box">
        <section class="regis">
            <div class="title">
                <h3>中国传统武术比赛报名系统</h3>
            </div>
            <div class="box3">
                <div class="box1">
                    <div class="input">
                        <!-- <img src="../images/用户.png" style="width: 30px;height: 30px;"> -->
                        <span class="ipttext">用户名</span>
                        <input v-model="user.username" class="username" placeholder="请输入您的用户名"
                            style="border: 0;width: 100%;" required>
                    </div>
                    <div class="input">
                        <!-- <img src="../images/密码.png" style="width: 30px;height: 30px;"> -->
                        <span class="ipttext">密 码</span>
                        <input v-model="user.password" class="password" id="password" placeholder="请输入您的密码"
                            style="border: 0;width: 100%;" type="password" required>
                    </div>
                    <div class="input">
                        <!-- <img src="../images/密码.png" style="width: 30px;height: 30px;"> -->
                        <span class="ipttexts">确认密码</span>
                        <input v-model="psw" class="password" id="password" placeholder="请再次确认您的密码"
                            style="border: 0;width: 100%;" type="password" required>
                    </div>
                    <div class="register" @click="register">
                        <img src="./images/register.png" alt="" style="width: 20px;" class="regimg">
                        <button type="submit" class="regbtn" id="button">注册</button>

                    </div>
                </div>
            </div>
        </section>
    </div>
</body>

</html>
<script src="../../js/axios.min.js"></script>
<script src="../../js/vue.js"></script>

<script>

    new Vue({
        el: '.box',
        data: function () {
            return {
                user: {
                    username: "",
                    password: ""
                },
                psw: ""
            }
        },
        methods: {
            register() {
                if (this.user.password === this.psw) {
                    axios({
                        url: 'http://localhost:3002/competition/user/reguser',
                        method: 'post',
                        data: this.user
                    }).then(res => {
                        // console.log(res.data);
                        if (res.success === true) {
                            alert('注册成功')
                        } else {
                            alert(res.data.msg)
                        }
                    })
                } else {
                    alert('用户名或密码错误，请重新输入')
                }

            }
        },
        mounted() {

        }
    })
</script>